
<html>
<head>
    <title>wethink</title>
    <script type="text/javascript" src="${ctx}/js/gen_utils.js"></script>
    <script type="text/javascript" src="${ctx}/js/wb_utils.js"></script>
    <script type="text/javascript" src="${ctx}/js/urlparam.js"></script>
    <script type="text/javascript" src="${ctx}/js/wb_module.js"></script>
    <script type="text/javascript" src="${ctx}/js/wb_track.js"></script>
    <script type="text/javascript" src="${ctx}/js/jquery.js"></script>
    <!-- 播放器水印样式 -->
    <link rel="stylesheet" href="${ctx}/static/js/ckplayer/ckplayerWatermark.css"></link>
    <!-- 播放器js -->
    <script type="text/javascript" src="${ctx}/static/js/ckplayer/ckplayer.js"></script>
    <script type="text/javascript" src="${ctx}/static/js/video/video.cwn.js"></script>
    <script type="text/javascript" src="${ctx}/static/js/video/video.ck.js"></script>

</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="background:#eff3f5;">
<div id="video222" style="width:100%;height: 0;position: absolute; display: none;padding-top: 0">
        <video id=example-video class="video-js vjs-custom-skin vjs-big-play-centered" controls>
            <source
                    type="application/x-mpegURL">
        </video>
    </div>
    <link href="${ctx}/static/js/videojs/video-js.css" rel="stylesheet">
    <script src="${ctx}/static/js/videojs/video.js"></script>
    <script src="${ctx}/static/js/videojs/videojs-contrib-hls.js"></script>
    <script>
        // var player = videojs('example-video');
        // player.play();
    </script>
	 <script>
	// m3u8
        $('#video').css('display','none');
        $('#video222').css('display','block');
        var playerOptions = {
            // playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
            autoplay: false, // 如果为true,浏览器准备好时开始回放。
            muted: false, // 默认情况下将会消除任何音频。
            loop: false, // 是否视频一结束就重新开始。
            preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
            language: 'zh-CN',
            aspectRatio: '17:7', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
            fluid: false, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
            sources: [],
            poster: '', // 封面地址
            notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
            controlBar: {
                timeDivider: true, // 当前时间和持续时间的分隔符
                durationDisplay: true, // 显示持续时间
                remainingTimeDisplay: false, // 是否显示剩余时间功能
                fullscreenToggle: true // 是否显示全屏按钮
            }
        }
        videojs('example-video',playerOptions,function onPlayerReady() {
		  this.on("play", function(){
                console.log("视频开始播放")
                vodStartTime = new Date()
            });
			 this.on("pause", function(){
                console.log("视频暂停播放")
                vodEndTime = new Date()
                vodViewTime += Math.ceil((vodEndTime - vodStartTime)/1000);
                if (window.frames['content_iframe'].document.forms[0].vodViewTime){
                    window.frames['content_iframe'].document.forms[0].vodViewTime.value = vodViewTime;
                }
                vodStartTime = null;
                vodEndTime = null;
            });
			
			</script>
</body>
</html>
			     }).src(url);